<template>
	<view class="scan-container">
		<view class="absolute-wrap" :style="[{ top: customBar + 'px' }]">
			<view class="close" v-show="isClose">
				<u-icon name="close-circle-fill" color="#fff" size="50" @tap="$Router.pushTab('/pages/index/index')"></u-icon>
			</view>
			
			<view class="outboundInfo">
				<outboundInfo ref="outboundInfo" :item="currEditItem" @updateDataArr="updateDataArr" @handleClose="handleClose" />
			</view>
		</view>
		
		<!-- 如果scanMode是normal去掉下面的@scancode方法 -->
		<view class="scan-cameraCon">
			<camera
				v-show="isClose"
				class="scan-camera"
				device-position="back"
				flash="off"
				@error="error"
				:mode="scanMode"
				@scancode="cameraScan"
				:style="{ width: scanCameraWid, height: scanCameraHei }"
			>
				<view v-if="scanMode == 'scanCode'">
					<!-- 温馨提示：如果你觉得自定义弄四个角的边框太麻烦，可以叫ui切四个角的图片，直接插进来即可，本人因为没有ui才这样做 -->
					<!-- 左上角 -->
					<cover-view class="scan-border scan-left-top scan-verLine"></cover-view>
					<cover-view class="scan-border scan-left-top scan-horLine"></cover-view>
					<!-- 左下角 -->
					<cover-view class="scan-border scan-left-bottom scan-verLine"></cover-view>
					<cover-view class="scan-border scan-left-bottom scan-horLine"></cover-view>
					<!-- 右上角 -->
					<cover-view class="scan-border scan-right-top scan-verLine"></cover-view>
					<cover-view class="scan-border scan-right-top scan-horLine"></cover-view>
					<!-- 右下角 -->
					<cover-view class="scan-border scan-right-bottom scan-verLine"></cover-view>
					<cover-view class="scan-border scan-right-bottom scan-horLine"></cover-view>
					<!-- 上下移动的动画线 -->
					<cover-view class="scan-animation" :animation="scanAnimation"></cover-view>
				</view>
			</camera>
		</view>
			
		<!-- 下面两种模式暂时写死，具体样式要根据你们的代码来写，也可以使用插槽模式 -->
		<view class="" v-if="scanMode == 'normal'">
			<button type="primary" @click="takePhoto">拍照</button>
			<view>预览</view>
			<image mode="widthFix" :src="src"></image>
		</view>
		<view class="bottom-box">
			<view class="scan-res" v-if="scanMode == 'scanCode'">
				<view class="head">
					<text class="title">扫码出库</text>
					<text class="subtitle" :class="{active: isToggle}" @tap="isToggle=!isToggle">已扫({{ dataArr.length }})</text>
				</view>
				<view class="list" v-if="!isToggle">
					<scroll-view scroll-y="true" style="height: 300rpx;">
						<u-collapse :item-style="itemStyle">
							<u-collapse-item :title="item.head" v-for="(item, index) in dataArr" :key="index">
								<template #title>
									<view class="u-flex">
										<u-tag :text="index" type="info" size="mini" class="u-m-r-10" />
										<!-- <text class="label text-gray">规格名称：</text> -->
										<view class="text u-line-1">{{ item.title }}</view>
									</view>
								</template>
								<view class="item u-flex">
									<text class="label text-gray">二&ensp;维&ensp;码：</text>
									<view class="text u-line-1">{{ item.qrcode }}</view>
								</view>
								<view class="item u-flex">
									<text class="label text-gray">产品类别：</text>
									<view class="text u-line-1">{{ item.cateName }}</view>
								</view>
								<view class="item u-flex">
									<text class="label text-gray">单价/积分：</text>
									<view class="text u-line-1">{{ item.specName }}</view>
								</view>
								<view class="item u-flex">
									<text class="label text-gray">入库时间：</text>
									<view class="text u-line-1">{{ item.storage_time }}</view>
								</view>
								<view class="item u-flex">
									<text class="label text-gray">备&ensp;注&ensp;一：</text>
									<view class="text u-line-1">{{ item.remark1 || '-' }}</view>
								</view>
								<view class="item u-flex">
									<text class="label text-gray">备&ensp;注&ensp;二：</text>
									<view class="text u-line-1">{{ item.remark2 || '-' }}</view>
								</view>
							</u-collapse-item>
						</u-collapse>
					</scroll-view>
				</view>
				
				<view class="list" v-else>
					<scroll-view scroll-y="true" style="height: 300rpx;">
						<view class="li"
							v-for="(item, index) in dataArr"
							:key="index"
							:class="{active:currEditIndex == index}">
							<view>
								<u-tag :text="index" type="info" size="mini" class="u-m-r-10" />
								<text>{{ item.qrcode }}</text>
							</view>
						</view>
						<view v-if="kingList.length === 0">请扫码</view>
					</scroll-view>
				</view>
			</view>
			<view class="padding-left-lg padding-right-lg padding-bottom-lg">
				<button class="over-btn" @tap="step">下一步</button>
			</view>
		</view>
	</view>
</template>

<script>
// 获取系统状态栏的高度
let systemInfo = uni.getSystemInfoSync();
// #ifdef MP-WEIXIN
let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif
// 移动动画
let animation = wx.createAnimation({});
// 提示音（如果有可以导入，这个我用手机震动来提示扫码完成）
let innerAudioContext = wx.createInnerAudioContext();
innerAudioContext.src = '/static/music/beep.mp3';

import outboundInfo from '../components/outboundInfo.vue'
export default {
	name: 'outboundIndex',
	components: {
		outboundInfo
	},
	data() {
		return {
			isToggle: false, // 显示隐藏已扫二维码
			// 关闭按钮显示隐藏
			isClose: true,
			// 照相模式下图片临时路径
			src: '',
			// 动画
			scanAnimation: null,
			// 扫码模式下的多次扫码列表
			kingList: [],
			// 扫码后的数组
			dataArr: [],			
			clientInfo: {}, // 客户信息
		};
	},
	props: {
		// 照相模式还是扫码模式（normal：代表照相模式，scanCode：代表扫码模式，注意微信暂不支持扫描小程序码，不要问为什么，微信功能是这样）
		scanMode: {
			type: String,
			default: 'scanCode'
		},
		// 扫码成功用是否用震动来提示（1：表示震动模式，2：表示mp3模式）
		scanTip: {
			type: Number,
			default: 1
		},
		// 相机的宽度
		scanCameraWid: {
			type: String,
			default: '250px'
		},
		// 相机的高度
		scanCameraHei: {
			type: String,
			default: '250px'
		}
	},
	computed: {
		// 高度
		customBar() {
			let statusBarHeight = systemInfo.statusBarHeight;
			// #ifdef MP
			//return statusBarHeight + 44;
			// #endif
			// #ifndef MP
			return systemInfo.platform == 'android' ? statusBarHeight + 50 : statusBarHeight + 45;
			// #endif
			// #ifdef MP-WEIXIN
			return statusBarHeight;
			// #endif
		}
	},
	created() {
		if (this.scanMode == 'scanCode') {
			// 初始化扫码动画
			this.initAnimation();
		}
	},
	methods: {
		initAnimation() {
			var that = this;
			// 控制向上还是向下移动
			let m = true;
			setInterval(
				function() {
					if (m) {
						animation.translateY(240).step({ duration: 3000 });
						m = !m;
					} else {
						animation.translateY(10).step({ duration: 3000 });
						m = !m;
					}
					that.scanAnimation = animation.export();
				}.bind(this),
				3000
			);
		},
		cameraScan(e) {
			if (e) {
				let result = e.detail.result;
				// 如果已经扫描过了，就不添加到列表里面了
				if (this.kingList.indexOf(result) == -1) {
					switch (this.scanTip) {
						case 1:
							// 方式1，扫码成功后让手机震动
							uni.vibrateShort({
								success: function() {
									console.log('success');
								}
							});
							break;
						case 2:
							// 方式2，扫码成功后让手机播放声音
							innerAudioContext.play();
							break;
						default:
							// 方式1，扫码成功后让手机震动
							uni.vibrateShort({
								success: function() {
									console.log('success');
								}
							});
							break;
					}
					// 向数组尾部添加元素
					//this.kingList.push(result);
					// 向数组头部添加元素
					this.kingList.unshift(result);
					/* this.dataArr.unshift({
						qrcode: result,
						cname: '',
						cid: '',
						title: '',
						goodsId: '',
						specTitle: '',
						specId: '',
						price: '',
						storageTime: '',
						remark1: '',
						remark2: ''
					}) */
					// 扫码成功，调用接口，获取二维相关产品数据
					this.getDepotInfo(result);
				} else {
					uni.showToast({
						title: '已经扫描过了'
					});
				}
			}
		},
		// 如果不是扫码模式就用这个
		takePhoto() {
			const ctx = uni.createCameraContext();
			ctx.takePhoto({
				quality: 'high',
				success: res => {
					this.src = res.tempImagePath;
				}
			});
		},
		error(e) {
			if (e) {
				let that = this;
				// 如果用户不允许使用摄像头，需要提示引导用户授权
				wx.getSetting({
					success(res) {
						if (!res.authSetting['scope.camera']) {
							//获取摄像头权限
							wx.authorize({
								scope: 'scope.camera',
								success() {
									console.log('授权成功');
								},
								fail() {
									wx.showModal({
										title: '提示',
										content: '尚未进行摄像头权限授权，摄像头功能将无法使用',
										showCancel: false,
										success(res) {
											that.openAuthor();
										}
									});
								}
							});
						}
					},
					fail(res) {}
				});
			}
		},
		// 打开设置进行授权
		openAuthor(){
			let that = this;
			wx.openSetting({
				//这里的方法是调到一个添加权限的页面，可以自己尝试
				success: res => {
					console.log(1111);
					if (!res.authSetting['scope.camera']) {
						wx.showModal({
							title: '提示',
							content: '尚未进行摄像头权限授权，摄像头功能将无法使用',
							showCancel: false,
							success(res) {
								if (res.confirm) {
									console.log('用户点击确定');
									that.openAuthor();
									
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}else {
						wx.showModal({
							title: '提示',
							content: '授权成功！',
							showCancel: false,
							success: resData => {
								// 授权成功后，需要重新进入页面能调起相机组件
								uni.reLaunch({
									url:'/pages/products/outbound/index'
								})
							}
						});
					}
				},
				fail: function() {
					console.log('授权摄像头权限失败');
				}
			});
		},
		handleClose(e){
			this.isClose = e;
		},
		
		// 更新客户信息
		updateDataArr(e){
			this.clientInfo = e;
		},
		
		getDepotInfo(qrcode){
			let that = this
			//let data = ['sw66d118b7a5cd4', 'sw66d118b7a96c8'];
			that.$http('goods.getDepotInfo', {
				qrcode: qrcode
			}, '查询中...').then(res => {
				that.dataArr.push(res.data);
			})
		},	
		step(){
			uni.setStorageSync('dataArr', this.dataArr);
			uni.setStorageSync('clientInfo', this.clientInfo);

			this.$Router.push('/pages/product/outbound/step')
		}
	}
};
</script>

<style lang="scss" scoped>
body,uni-page-body{
	background-color: #000;
}
.scan-container {
	position: relative;
	.absolute-wrap {
		position: absolute;
		right: 20rpx;
		left: 20rpx;
		z-index: 999;
		display: flex;
		align-items: flex-start;
		gap: 20rpx;
		.close {

		}
		.outboundInfo {
			width: 100%;
		}
	}
	.scan-cameraCon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100vw;
		height: calc(100vh - 660rpx);
		.scan-camera {
			width: 250px;
			height: 250px;
			position: relative;
			// 四个角边框
			.scan-border {
				background-color: #007aff;
				position: absolute;
			}
			.scan-verLine {
				width: 5px;
				height: 20px;
			}
			.scan-horLine {
				width: 20px;
				height: 5px;
			}
			// 左上角
			.scan-left-top {
				left: 0;
				top: 0;
			}
			// 左下角
			.scan-left-bottom {
				left: 0;
				bottom: 0;
			}
			// 右上角
			.scan-right-top {
				right: 0;
				top: 0;
			}
			// 右下角
			.scan-right-bottom {
				right: 0;
				bottom: 0;
			}
			// 相机中上下移动的线条
			.scan-animation {
				position: absolute;
				top: 5px;
				left: 5px;
				width: 240px;
				height: 4px;
				background-color: #007aff;
				border-radius: 50%;
			}
		}
	}
	.bottom-box {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
	}
	.scan-res {
		margin: 30rpx 20rpx;
		padding: 30rpx;
		border-radius: 20rpx;
		background-color: #fff;
		.head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.title {
				font-size: 32rpx;
				font-weight: blod;
			}
			.subtitle {
				font-size: 24rpx;
				color: #999;
				&.active {
					color: #07c160;
				}
			}
		}
		.list {
			padding: 20rpx 0;
			.li {
				display:flex;
				align-items: center;
				justify-content: space-between;
				line-height: 64rpx;
				&.active {
					color: #2979ff;
				}
			}
		}		
	}
	.over-btn {
		color: #fff;
		font-size: 28rpx;
		width: 60%;
		background: #E77817;
	}
}












.scan-btn {
	color: #fff;
	font-size: 28rpx;
	width: 510rpx;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 40rpx;
	margin-top:60rpx;
	margin-right:auto;
	margin-left:auto;
	background-color: #E77817;
	/deep/.u-icon {
		margin-right: 10rpx;
	}
}

.u-collapse {
	.item {
		padding: 10rpx 0;
	}
	.label {
		width: 150rpx;
	}
	.text {
		width: 400rpx;
		color: #000;
	}
}

.footer {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 20rpx;
	background-color: #fff;
	.u-reset-button {
		color: #fff;
		font-size: 28rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 20rpx;
		background-color: #E77817;
	}
}
</style>